<template>
  <div class="adjustment">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EWManagement' }">预警管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/AdjustmentList' }">预警调整及解除</el-breadcrumb-item>
        <el-breadcrumb-item v-if="show === false">调整申请</el-breadcrumb-item>
        <el-breadcrumb-item v-else>解除申请</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="adjustment-center">
      <TimeLine :activities="activities" />
      <newlyAdded v-if="show === false" />
      <Approval v-else />
    </div>
  </div>
</template>

<script>
import newlyAdded from "./components/newlyAdded.vue";
import Approval from "./components/Approval.vue";
import TimeLine from "@/components/component/timeLine.vue";
export default {
  name: "Adjustment",
  components: { newlyAdded, Approval, TimeLine },
  data() {
    return {
      reverse: false,
      value1: "",
      show: this.$route.query.show,
      formInline: {
        date1: "",
        region: "",
        value: ""
      },
      activitie: [
        {
          content: "预警信息新增",
          timestamp: "2022-09-1 18:00:00"
        },
        {
          content: "预警研判",
          timestamp: "2022-09-2 18:00:00"
        },
        {
          content: "预警通知单新增",
          timestamp: "2022-09-2 20:00:00"
        },
        {
          content: "预警通知单审批",
          timestamp: "2022-09-5 18:00:00"
        },
        {
          content: "预警通知单发布",
          timestamp: "2022-09-5 18:00:00"
        },
        {
          content: "预警任务发布",
          timestamp: "2022-09-5 18:00:00"
        },
        {
          content: "预警通知单调整申请",
          timestamp: "2022-09-5 18:00:00",
          color: "rgb(37, 109, 252)"
        }
      ],
      activities: [
        {
          content: "预警信息新增",
          timestamp: "2022-09-1 18:00:00"
        },
        {
          content: "预警研判",
          timestamp: "2022-09-2 18:00:00"
        },
        {
          content: "预警通知单新增",
          timestamp: "2022-09-2 20:00:00"
        },
        {
          content: "预警通知单审批",
          timestamp: "2022-09-5 18:00:00"
        },
        {
          content: "预警通知单发布",
          timestamp: "2022-09-5 18:00:00"
        },
        {
          content: "预警任务发布",
          timestamp: "2022-09-5 18:00:00"
        },
        {
          content: "预警通知单调整申请",
          timestamp: "2022-09-5 18:00:00"
        },
        {
          content: "预警通知单解除申请",
          timestamp: "2022-09-5 18:00:00",
          color: "rgb(37, 109, 252)"
        }
      ]
    };
  },
  methods: {
    AddFh() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped lang="less">
.adjustment {
  width: 100%;
  height: 100%;
}

:deep(.el-breadcrumb) {
  font-size: 16px;
  line-height: initial;
}

:deep(.el-timeline) {
  width: 85%;
  margin-left: 35px;
  margin-top: 30px;
}

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

.adjustment-center {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
}</style>
